<template>
  <div class="home-container">
    <Row :gutter="24"
         style="margin-bottom: 24px">
      <Col span="12">
      <Card :style="{ height: cardHeight + 'px' }">
        <p slot="title">昨日销售额</p>
        <i slot="extra"
           class="largeicon iconsys iconqianbao"></i>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconxiaofeijine"></i>
          <span class="label">总销售</span>
          <span class="text">¥ {{shopMemberDaily.totalSaleAmount}} 元</span>
          </Col>
          <Col span="12"
               class="item"
               v-if="shopMemberDaily.shopCounts>1">
          <i class="labelicon iconsys iconmendian"></i>
          <span class="label">门店数</span>
          <span class="text">{{shopMemberDaily.shopCounts}} 家</span>
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconyouxibi"></i>
          <span class="label">游戏币销售额</span>
          <span class="text">¥ {{shopMemberDaily.coinSaleAmount}} 元</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuanqia"></i>
          <span class="label">会员卡套餐销售额</span>
          <span class="text">¥ {{shopMemberDaily.memPkgSaleAmount}} 元</span>
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuanqia"></i>
          <span class="label">会员销售额</span>
          <span class="text">¥ {{shopMemberDaily.memTotalAmount}} 元</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuanqia"></i>
          <span class="label">非会员销售额</span>
          <span class="text">¥ {{shopMemberDaily.nomemTotalAmount}} 元</span>
          </Col>
        </Row>
        <Row v-if="shopMemberDaily.shopCounts>1">
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconmendian"></i>
          <span class="label">最高销售门店</span>
          <span class="text">{{shopMemberDaily.maxShopName}}</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconmendian"></i>
          <span class="label">最低销售门店</span>
          <span class="text">{{shopMemberDaily.minShopName}}</span>
          </Col>
        </Row>
      </Card>
      </Col>
      <Col span="12">
      <Card :style="{ height: cardHeight + 'px' }">
        <p slot="title">昨日会员数据</p>
        <i slot="extra"
           class="largeicon iconsys iconmendianhuiyuan"></i>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuan"></i>
          <span class="label">昨日新增会员</span>
          <span class="text">{{shopMember.memAddNum}} 人</span>
          </Col>
          <Col span="12"
               class="item">
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuan"></i>
          <span class="label">会员办理率</span>
          <span class="text">{{shopMember.memHandleRate?(shopMember.memHandleRate*100).toFixed(2):0}} %</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconxiaofeijin"></i>
          <span class="label">消费占比</span>
          <span class="text">{{shopMember.memSaleRate?(shopMember.memSaleRate*100).toFixed(2):0}} %</span>
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconxiaofeijine"></i>
          <span class="label">单次消费额</span>
          <span class="text">¥ {{shopMember.memSaleAmount}} 元</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconxiaofeijin"></i>
          <span class="label">消费次数</span>
          <span class="text">{{shopMember.memSaleTimes}} 次</span>
          </Col>
        </Row>
      </Card>
      </Col>
    </Row>
    <Row :gutter="24">
      <Col span="12">
      <Card :style="{ height: cardHeight + 'px' }">
        <p slot="title">昨日微信数据</p>
        <i slot="extra"
           class="largeicon iconsys iconweixin"></i>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconxiaofeijine"></i>
          <span class="label">总金额</span>
          <span class="text">¥ {{wechat.totalAmount}} 元</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconxiaofeijine"></i>
          <span class="label">销售</span>
          <span class="text">{{wechat.saleNum}} 笔</span>
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuan"></i>
          <span class="label">新增会员数</span>
          <span class="text">{{wechat.memberAddNum}} 人</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconyouxibi"></i>
          <span class="label">取币数</span>
          <span class="text">{{wechat.withdrawNum}} 枚</span>
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys icondaijinquan"></i>
          <span class="label">代金券使用量</span>
          <span class="text">{{wechat.couponUseNum}} 张</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys icondaijinquan"></i>
          <span class="label">代金券抵用金额</span>
          <span class="text">¥ {{wechat.couponUseAmount}} 元</span>
          </Col>
        </Row>
      </Card>
      </Col>
      <Col span="12">
      <Card :style="{ height: cardHeight + 'px' }">
        <p slot="title">昨日存兑彩票数据</p>
        <i slot="extra"
           class="largeicon iconsys iconcaipiao"></i>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuancunpiao"></i>
          <span class="label">会员存票数</span>
          <span class="text">{{lottery.memSaveLotteryNum}} 张</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuancunpiao"></i>
          <span class="label">会员兑票数</span>
          <span class="text">{{lottery.memDrawLotteryNum}} 张</span>
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuancunpiao"></i>
          <span class="label">非会员存票数</span>
          <span class="text">{{lottery.nomemSaveLotteryNum}} 张</span>
          </Col>
          <Col span="12"
               class="item">
          <i class="labelicon iconsys iconhuiyuancunpiao"></i>
          <span class="label">非会员兑票数</span>
          <span class="text">{{lottery.nomemDrawLotteryNum}} 张</span>
          </Col>
        </Row>
      </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { lotteryDaySearch, memberDaily, salesDaily, wechatDaily } from '@/api/home'
import { formatDate } from '@/libs/tools'
export default {
  name: 'home',
  data () {
    return {
      cardHeight: 0,
      dateTimes: formatDate(
        new Date(new Date().getTime() - 86400000),
        'yyyy-MM-dd'
      ),
      dataTime: {
        startDate: '',
        endDate: ''
      },
      shopMemberDaily: {
        totalSaleAmount: 0, // 总销售
        coinSaleAmount: 0, // 游戏币销售额
        memTotalAmount: 0, // 会员销售额
        memPkgSaleAmount: 0, // 会员卡套餐销售额
        nomemTotalAmount: 0 // 非会员销售额
      },
      shopMember: {
        memAddNum: 0, // 会员新增数
        memHandleRate: 0, // 会员办理率
        memSaleRate: 0, // 会员消费占比
        memSaleTimes: 0, // 会员消费次数
        memSaleAmount: 0 // 会员单次消费额
      },
      wechat: {
        totalAmount: 0,
        memberAddNum: 0, // 新增会员数
        saleNum: 0, // 销量
        withdrawNum: 0, // 取币数
        couponUseNum: 0, // 代金券使用数量
        couponUseAmount: 0 // 代金券抵用金额
      },
      lottery: {
        memSaveLotteryNum: 0, // 会员存票数
        memDrawLotteryNum: 0, // 会员取票数
        nomemSaveLotteryNum: 0, // 非会员存票数
        nomemDrawLotteryNum: 0 // 非会员取票数
      }
    }
  },
  mounted () {
    this.dataTime = {
      startDate: this.dateTimes + ' 00:00:00',
      endDate: formatDate(new Date(new Date(this.dateTimes).getTime() + 86400000), 'yyyy-MM-dd') + ' 00:00:00'
    }
    this.calcCardHeight()
    this.getSalesDaily()
    window.addEventListener('resize', this.calcCardHeight)
  },
  methods: {
    calcCardHeight () {
      this.cardHeight = ((document.documentElement.clientHeight || document.body.clientHeight) - 140) / 2
    },
    getSalesDaily () {
      // 昨日销售额
      if (this.hasPermission('moms:report:dailysummaryanalytics')) {
        salesDaily({
          ...this.dataTime,
          merchantId: this.$store.state.user.merchantId
          // shopId: this.$store.state.user.orgId
        }).then(res => {
          if (res.data.status === 200) {
            this.shopMemberDaily = res.data.data ? res.data.data : {
              totalSaleAmount: 0, // 总销售
              coinSaleAmount: 0, // 游戏币销售额
              memTotalAmount: 0, // 会员销售额
              memPkgSaleAmount: 0, // 会员卡套餐销售额
              nomemTotalAmount: 0 // 非会员销售额
            }
            this.filterData(this.shopMemberDaily)
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
        // 昨日会员数据
        memberDaily({
          ...this.dataTime,
          merchantId: this.$store.state.user.merchantId
          // shopId: this.$store.state.user.orgId
        }).then(res => {
          if (res.data.status === 200) {
            this.shopMember = res.data.data ? res.data.data : {
              memAddNum: 0, // 会员新增数
              memHandleRate: 0, // 会员办理率
              memSaleRate: 0, // 会员消费占比
              memSaleTimes: 0, // 会员消费次数
              memSaleAmount: 0 // 会员单次消费额
            }
            this.filterData(this.shopMember)
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
        // 昨日存取彩票数据
        lotteryDaySearch({
          ...this.dataTime,
          merchantId: this.$store.state.user.merchantId
          // shopIds: this.$store.state.user.orgId.split(',')
        }).then(res => {
          if (res.data.status === 200) {
            this.lottery = res.data.data ? res.data.data : {
              memSaveLotteryNum: 0, // 会员存票数
              memDrawLotteryNum: 0, // 会员取票数
              nomemSaveLotteryNum: 0, // 非会员存票数
              nomemDrawLotteryNum: 0 // 非会员取票数
            }
            this.filterData(this.lottery)
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      }
      if (this.hasPermission('moms:report:dailysummaryanalytics')) {
        // 昨日微信数据
        wechatDaily({
          ...this.dataTime,
          merchantId: this.$store.state.user.merchantId
          // shopIds: this.$store.state.user.orgId.split(',')
        }).then(res => {
          if (res.data.status === 200) {
            this.wechat = res.data.data ? res.data.data : {
              totalAmount: 0,
              memberAddNum: 0, // 新增会员数
              saleNum: 0, // 销量
              withdrawNum: 0, // 取币数
              couponUseNum: 0, // 代金券使用数量
              couponUseAmount: 0 // 代金券抵用金额
            }
            this.filterData(this.wechat)
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      }
    },
    filterData (data) {
      Object.keys(data).forEach(key => {
        data[key] = data[key] ? data[key] : 0
      })
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.calcCardHeight)
  }
}
</script>

<style lang="less">
.home-container {
  overflow: hidden;
  .ivu-card {
    overflow: hidden;
    min-width: 40%;
    .ivu-card-head {
      background: #5cadff;
      p {
        color: #fff;
      }
    }
    .ivu-card-extra {
      right: 0;
      top: -4px;
    }
  }
  .iconsys,
  .iconsys:hover {
    &.largeicon {
      cursor: default;
      font-size: 38px;
      color: #fff;
      opacity: 0.5;
    }
  }
  .labelicon {
    margin-right: 8px;
    color: #dadee3;
  }
  .item {
    padding: 15px 0;
  }
  .label {
    color: #808695;
    display: inline-block;
    width: 130px;
  }
  .text {
    color: #464c5b;
    font-weight: 500;
  }
}
</style>
